<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页导入xml标签配置</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/lib/uplodifyh5/event_common.js"></script>
<style type="text/css">
	#propMapping{
		width:600px;
		margin:0 auto;
		text-align:center;
		padding:20px 50px;
	    border: 1px solid #ddd;
	    box-shadow: 0 15px 80px rgba(0,0,0,.2);
	    background-color: white;
	}
	#propMapping table td{
		vertical-align:middle;
	}
	#propMapping table .left-wt{
		text-align: left;
	}
	#propMapping table .right-wt{
		text-align: right;
	}
	#propMapping table td span{
		min-width:100px;
		display:inline-block;
		border-bottom: 1px solid #888;
	}
	#propMapping table td span:focus{
		outline:none;
		font-size: 15px;
	}
</style>
</head>
<body>
	<div class="container-fluid">
		<div id="propMapping">
			<textarea class="form-control" style="max-width: 100%;" id="xmlStr"></textarea>
			<button class="btn btn-success" onclick="parseXmlTag()">解析xml节点</button><!-- 修改按钮颜色默认变为绿色 -->
			<table class="table table-condensed">
				<thead>
					<tr><th width="50">序号</th><th class="right-wt">节点描述</th><th></th><th class="left-wt">xml节点代码</th></tr>
				</thead>
				<tbody></tbody>
				<tfoot><tr><td colspan="3" class="alert alert-warning">对照结果是程序自动生成，需要确认和修改</td></tr></tfoot>
			</table>
			<button class="btn btn-success"  id="importSuccess" onclick="generateProp()">更新Properties</button>
		</div>
		<span class="propItem" data-key=""></span>
		<div class="panel panel-success">
		  <div class="panel-heading">导入XML</div>
		  <div class="panel-body">
		    <div class="center-block" style = "text-align:center;width:300px;">
				<input id="file_upload" type="file" name="file" style="display: none;"/>
			</div>
		  </div>
		</div>
	</div>
	
	<%--编辑框 --%>
	<div class="modal fade" id="editDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					</button>
					<h4 class="modal-title" id="myModalLabel">提示</h4>
				</div>
				<div class="modal-body">...</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-info" data-dismiss="modal">确定</a>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
$(function(){
	tabId= $("#tabContent > .tab-pane.active").attr("id");
	//添加界面的附件管理,标杆导入
	$('#'+tabId+' #file_upload').uploadifive({
			'uploadScript' : '<%=request.getContextPath() %>/MedicalRecord/universalImport.dhc',
	        'height': 37,
	        'width' :140,
	        'auto'  : true,//是否自动开始
	        'uploadLimit' : 100, //一次同步上传的文件数目     
	        'fileSizeLimit' : '500MB', //单个文件大小，0为无限制，可接受KB,MB,GB等单位的字符串值     
	        'queueSizeLimit' : 100, //队列中同时存在的文件个数限制
	        'fileObjName':'file',
	        'removeCompleted': true,  //是否完成后移除序列，默认为true
	        'removeTimeout' : '5',  //上传完成后队列多长时间后消失。默认 3秒    需要：removeCompleted : true,时使用
	        'progressData' :'percentage',//设置上传进度显示方式，percentage显示上传百分比，speed显示上传速度
	        'buttonText' : '<i class="fa fa-folder-open fa-lg"></i>&nbsp;&nbsp;选择文件',
	        'buttonClass': 'uploadifyH5_btn',
	        'fileType' : '*.xls; *.xlsx; *.xml; *.dbf',//允许上传的文件格式
	        'multi'    : true,//是否支持多文件上传
	        'method'   :'post',//提交方式
	        'debug':false,
	        //当点击文件队列中文件的关闭按钮或点击取消上传时触发
	        'onCancel': function(){ },
	      	//返回一个错误，选择文件的时候触发  
	        'onSelectError':  function(){ 
	        	drgUI.error('文件上传失败！');
	        },
	      	//检测FLASH失败调用  
	        'onFallback':function(){  
	            drgUI.error('浏览器检测不到兼容版本的HTML5！');
	        }, 
	        'onUploadError' : uploadify_onUploadError,
	        'onQueueComplete':function(queueData){

	        	$.post(contextPath+"/MedicalRecord/universalImportComplete.dhc").done(function(result){

	        		if(result.success){
	                    var message = result.data.substring(result.data.indexOf("<MESSAGE>")+9,result.data.indexOf("</MESSAGE>"));
	                    var content = '成功上传的文件数: ' + queueData.successful + ';  上传出错的文件数: ' + queueData.errors
	                   				 +' <br> '+message;
	        			$('#editDialog .modal-content').css({'width':'400px'});
	        			$('#editDialog .modal-body').html(content);
	        			$('#editDialog').modal('show');
	        			
	        		}else{
	                    var content = result.errorMessage;
	        			$('#editDialog .modal-content').css({'width':'400px'});
	        			$('#editDialog .modal-body').html(content);
	        			$('#editDialog').modal('show');
	        		}
	        	});
	        }
	 });
	
	// 上传按钮小手悬浮
	$("[type=file]").css("cursor","pointer");
    $('#file_upload-button').css({'line-height':'25px','width':'120px','margin':'0'});
    $('#SWFUpload_0').css({'width':'120px'});
	
	$('#xmlStr').keydown(function(e){
		if (e.keyCode==13) {
			parseXmlTag();
		}
	})
	
	showProp();
})

function parseXmlTag(){
	var xmlStr = $('#xmlStr').val();
	$.post(contextPath+'/MedicalRecord/parseXmlTag.dhc',{'xml':xmlStr}).done(function(result){
		if (result.success) {
			$('#propMapping table tbody').html('');
			$.each(result.data,function(i,n){
				$('#propMapping table tbody').append('<tr><td>'+(i+1)+'</td><td class="right-wt">'+n.tagDesc+'：</td><td class="right-wt">'+n.tagName+'=</td><td class="left-wt"><span class="propItem" data-key="'+n.tagName+'" contenteditable="true">'+n.tagNameNew+'</span></td></tr>');
			});
		} else {
			$('#propMapping table').html(result.errorMessage);
		}
	})
}

function generateProp(){
	var prop = {};
	$.each($('.propItem'),function(){
		if($(this).attr('data-key')!=''){
			prop[$(this).attr('data-key')]=$(this).text();
		}
	});
	$.post(contextPath+'/MedicalRecord/generateProp.dhc',{'prop':JSON.stringify(prop)}).done(function(result){
		if (result.success) {
			showProp();
		} else {
			$('#propMapping table').html(result.errorMessage);
		}
	});
}

function showProp(){
	$.post(contextPath+'/MedicalRecord/showMedicalrecordMapping.dhc').done(function(result){
		if (result.success) {
			$('#propMapping table tbody').html('');
			$.each(result.data,function(i,n){
				$('#propMapping table tbody').append('<tr><td>'+(i+1)+'</td><td class="right-wt">'+n.tagDesc+'：</td><td class="right-wt">'+n.tagName+'=</td><td class="left-wt"><span class="propItem" data-key="'+n.tagName+'" contenteditable="true">'+n.tagNameNew+'</span></td></tr>');
			});
		} else {
			$('#propMapping table').html(result.errorMessage);
		}
	})
}

</script>
</html>